<template>
  <div>
    <NavBar>
      <template #title>
        我的订单
      </template>
      <template #left>
        <van-icon name="arrow-left" @click="goBack" />
      </template>
    </NavBar>
    <div class="tabs">
      <van-tabs v-model="active">
        <van-tab title="全部" name="all" to="/all"></van-tab>
        <van-tab title="待支付" name="unpaid" to="/unpaid"></van-tab>
        <van-tab title="待发货" name="dispatched" to="/dispatched"></van-tab>
        <van-tab title="待收货" name="receipt" to="/receipt"></van-tab>
        <van-tab title="待评价" name="evaluate" to="/evaluate"></van-tab>
      </van-tabs>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'MyOrderIndex',
  data () {
    return {
      active: this.$route.query.active || 'all'
    }
  },
  methods: {
    goBack () {
      this.$router.replace('/my')
    }
  }
}
</script>

<style>

</style>
